<template>
  <div class="get absolute">
    <div class="back">
      <img src="http://diandian.zgkpz.com/images/m_get/back.png" />
    </div>
    <div class="main">
      <div class="hongbao">
        <div class="content">
          <p>恭喜获得金币</p>
          <div>
            <h3>500<span>币</span></h3>
          </div>
          <small
            >首次注册用户送金币<br />（仅限首次注册用户，卸载再重新安装用户不再赠送）</small
          >
        </div>
      </div>
      <div class="m_list">
        <img
          src="http://diandian.zgkpz.com/images/m_get/lipin.png"
          class="lip"
        />
        <div class="list">
          <ul>
            <li>
              <img src="http://diandian.zgkpz.com/images/m_get/pig.png" />
              <div>
                <h2>奖品</h2>
                <small>礼品价格：1500币</small>
                <div class="jindutiao"></div>
              </div>
            </li>
            <li>
              <img src="http://diandian.zgkpz.com/images/m_get/pig.png" />
              <div>
                <h2>奖品</h2>
                <small>礼品价格：1500币</small>
                <div class="jindutiao"></div>
              </div>
            </li>
            <li>
              <img src="http://diandian.zgkpz.com/images/m_get/pig.png" />
              <div>
                <h2>奖品</h2>
                <small>礼品价格：1500币</small>
                <div class="jindutiao"></div>
              </div>
            </li>
            <li>
              <img src="http://diandian.zgkpz.com/images/m_get/pig.png" />
              <div>
                <h2>奖品</h2>
                <small>礼品价格：1500币</small>
                <div class="jindutiao"></div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.code img {
  width: 100%;
  height: 100%;
}
.back img {
  width: 2rem;
  padding: 0.5rem;
}
.main {
  font-family: SimHei;
}
.hongbao {
  width: 5rem;
  height: 7rem;
  margin-left: 1.35rem;
  background: url("http://diandian.zgkpz.com/images/m_get/hongbao.png")
    no-repeat;
  background-size: 100%;
}
.hongbao .content {
  text-align: center;
  position: relative;
  top: 3rem;
}
.hongbao h3 {
  color: #ffffff;
  font-size: 0.45rem;
}
.hongbao span {
  color: #fdff8c;
  font-size: 0.35rem;
}
.hongbao p {
  color: #fdff8c;
  font-size: 0.45rem;
}
.hongbao small {
  color: #ffea88;
}
.m_list {
  position: relative;
  top: -2rem;
  text-align: center;
}
.lip {
  width: 5rem;
}
.list {
  width: 7rem;
  height: 7rem;
  margin: -0.65rem 0.3rem;
  background: url("http://diandian.zgkpz.com/images/m_get/kuang.png") no-repeat;
  background-size: 100%;
  text-align: center;
}
.list ul {
  height: 5rem;
  overflow-y: auto;
}
.list ul li {
  width: 6rem;
  height: 2rem;
  background: url("http://diandian.zgkpz.com/images/m_get/juxing.png") no-repeat;
  background-size: 100%;
  display: inline-flex;
  text-align: left;
}
.list ul li:first-child {
  margin-top: 1rem;
}
.list ul li div {
  line-height: 0.6rem;
  padding-left: 0.3rem;
  width: 80%;
}
.list ul li img {
  padding: 0.3rem;
}
.list ul li h2 {
  color: #ffffff;
  font-size: 0.45rem;
  margin-top: 0.2rem;
}
.list ul li small {
  color: #e8b7ff;
}
.jindutiao {
  width: 3rem;
  height: 0.5rem;
  background: url("http://diandian.zgkpz.com/images/m_get/yuanjiaojuxing.png")
    no-repeat;
  background-size: 100%;
}
.jindutiao span {
}
</style>
